<template>
  <div class="gaishangpin">
    <el-dialog title="创建订单" :visible.sync="fixprolog" width="800px" :close-on-click-modal="false" :show-close="false">
<!--      {
          "id": 12216,
          "order_id": 1404809,
          "id_card_num": "422123197006110051",
          "id_card_name": "吴小鹤",
          "address_name": "吴宗兰",
          "address_mobile": "13636042285",

          "address_province": "湖北省",
          "address_city": "黄冈市",
          "address_district": "红安县",

          "address_province_code": "",
          "address_city_code": "",
          "address_district_code": "",
          "address": "湖北省 黄冈市 红安县 东村52号林业科技研究所院内",
          "channel_class": "0",
          "source": "0",
          "goods_sku": "0"
      } -->
      <div><el-input v-model="sendformtask.id_card_name" placeholder="姓名" style="margin-bottom: 20px; width: 320px;"></el-input></div>
      <div><el-input v-model="sendformtask.id_card_num" placeholder="身份证号" style="margin-bottom: 20px; width: 320px;"></el-input></div>
      <div><el-input v-model="sendformtask.address_name" placeholder="收件人" style="margin-bottom: 20px; width: 320px;"></el-input></div>
      <div><el-input v-model="sendformtask.address_mobile" placeholder="手机号" style="margin-bottom: 20px; width: 320px;"></el-input></div>
      <div class="kflexc" style="margin-bottom: 20px; font-size: 12px;" v-if="!bianji">
        <div style=" width: 290px; margin-right: 20px; line-height: 36px; height: 36px;  padding: 0 15px; background: #f7f8fa;">
          {{sendformtask.address_province}}
          {{sendformtask.address_city}}
          {{sendformtask.address_district}}
        </div>
        <div @click="bianji = true" style="color: #409eff;cursor: pointer;">修改</div>
      </div>


      <div v-if="bianji"><el-cascader @change="changeaddress" v-model="sendformtask.city" :options="citylist" style="margin-bottom: 20px; width: 320px;"></el-cascader></div>
      <div><el-input v-model="sendformtask.address" placeholder="请填写详细地址" style="margin-bottom: 20px; width: 620px;"></el-input></div>
      <div>
        <el-select v-model="sendformtask.call_goods_sku" filterable clearable placeholder="请选择商品" style="margin-bottom: 20px; width: 320px;">
          <el-option :label="item.title + '---' + item.fetch_code" :value="item.id" v-for="item in shangpinlist"
            :key="item.id"></el-option>
        </el-select>
      </div> 
      <div>
        <el-select v-model="sendformtask.channel_class" clearable filterable placeholder="请选择来源渠道分类" style="margin-bottom: 20px; width: 320px;" @change="getlaiyuan">
          <el-option :label="item.channel_name" :value="item.id" v-for="item in qudaolists"
            :key="item.id"></el-option>
        </el-select>
      </div>
      <div>
        <el-select v-model="sendformtask.call_source" clearable filterable placeholder="请选择订单来源" style="margin-bottom: 20px; width: 320px;" v-if="sendformtask.channel_class">
            <el-option :label="item.source_name" :value="item.id" v-for="item in qudaolaiyuanlists" :key="item"></el-option>
          </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="fixprologg" round>取 消</el-button>
        <el-button type="danger" :loading="sendloading" @click="sendFormTaskgo" round>创建订单</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
  	regionData,
  	CodeToText,
  	TextToCode
  } from 'element-china-area-data'

  import axios from "axios";
  export default {
    name: "gaishangpin",
    props: ['all'],
    data() {
      return {
        fixprolog: true,
        sendloading: false,
        sendformtask: {},
        qudaolists:"",
        shangpinlist:"",
        qudaolaiyuanlists:"",
        citylist: regionData,
        bianji:false,
        duanxinlists:""

      };
    },
    created() {




      


      //获取销售渠道
      axios.get('/api/form/channels?page_size=2000')
        .then(response => {
          if (response.data.msg.code == 0) {
            this.qudaolists = response.data.data.data
          } else {
            this.$message.error(response.data.msg.info);
          }
        })

      axios.get('/api/gth/order-pages2',{params:{
        status:100,
        _page:1,
        _page_size:2000
      }})

      .then(response => {
        if (response.data.msg.code == 0) {
          this.shangpinlist = response.data.data.data
        } else {
          this.$message.error(response.data.msg.info);
        }
      })



      // //获取运营商渠道
      // axios.get('/api/form/channel/sources')
      //   .then(response => {
      //     if (response.data.msg.code == 0) {
      //        this.qudaolaiyuanlists = response.data.data
      //     } else {
      //        this.$message.error(response.data.msg.info);
      //     }
      // })

      axios.get('/api/plan-market/call/order/info/get/v2',{params:{
        task_order_id:this.all.id
      }})
        .then(response => {
          if (response.data.msg.code == 0) {
             this.sendformtask = response.data.data
              if(this.sendformtask.call_goods_sku){
                this.sendformtask.call_goods_sku = parseInt(this.sendformtask.call_goods_sku)
              }
              if(this.sendformtask.channel_class){
                this.sendformtask.channel_class = parseInt(this.sendformtask.channel_class)
              }
              if(this.sendformtask.call_source){
                this.sendformtask.call_source = parseInt(this.sendformtask.call_source)
              }

              axios.get('/api/form/channel/sources?channel_ids='+this.sendformtask.channel_class)
                .then(response => {
                  if (response.data.msg.code == 0) {
                     this.qudaolaiyuanlists = response.data.data
                  } else {
                     this.$message.error(response.data.msg.info);
                  }
              })

             if(this.sendformtask.address){
                this.sendformtask.address = this.sendformtask.address.split(" ")[3]
             }

             var city = []
             if(this.sendformtask.address_province != ""){
             	city.push(TextToCode[this.sendformtask.address_province].code)
             }
             if(this.sendformtask.address_city != ""){
             	city.push(TextToCode[this.sendformtask.address_province][this.sendformtask.address_city].code)
             }
             if(this.sendformtask.address_district != ""){
             	city.push(TextToCode[this.sendformtask.address_province][this.sendformtask.address_city][this.sendformtask.address_district].code)
             }
             this.sendformtask.city = city

          } else {
             this.$message.error(response.data.msg.info);
          }
      })
    },
    methods: {
      fixprologg:function(){
        this.$emit('chuangjiango')
      },
      getlaiyuan:function(){
        this.sendformtask.call_source = ''
        axios.get('/api/form/channel/sources?channel_ids='+this.sendformtask.channel_class)
          .then(response => {
            if (response.data.msg.code == 0) {
               this.qudaolaiyuanlists = response.data.data
            } else {
               this.$message.error(response.data.msg.info);
            }
        })
      },

      //选择省市区
      changeaddress:function(v){


      	this.sendformtask.address_province = CodeToText[v[0]],
      	this.sendformtask.address_city = CodeToText[v[1]]
        this.sendformtask.address_district = CodeToText[v[2]]

      },
      getRandomChar:function(len = 8)  {
        var  x = "0123456789qwertyuioplkjhgfdsazxcvbnm" // 需要什么字符这里添加
        var  tmp = ""
        var timestamp = new Date().getTime();
        for(var  i=0; i<len; i++)  {
          tmp += x.charAt(Math.ceil(Math.random()*100000000)%x.length);
        }
        return  timestamp+tmp;
      },
      sendFormTaskgo: function() {
        this.sendloading = true

        let obj = {
            "id": this.sendformtask.id,
            "order_id": this.sendformtask.order_id,
            "id_card_num": this.sendformtask.id_card_num,
            "id_card_name": this.sendformtask.id_card_name,
            "address_name": this.sendformtask.address_name,
            "address_mobile": this.sendformtask.address_mobile,
            "address_province": this.sendformtask.address_province,
            "address_city": this.sendformtask.address_city,
            "address_district": this.sendformtask.address_district,
            "address": this.sendformtask.address_province + this.sendformtask.address_city + this.sendformtask.address_district + this.sendformtask.address,
            "channel_class": this.sendformtask.channel_class,
            "call_source": this.sendformtask.call_source,
            "call_goods_sku": this.sendformtask.call_goods_sku,
            source_id : 'waihu' + this.getRandomChar(),
            task_order_id:this.all.id
        }

        axios.post('/api/plan-market/call/order-create/v2',obj)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success("创建订单成功！");
              this.$emit('chuangjiango')

            } else {
               this.$message.error(response.data.msg.info);

            }
        })

      },
    }
  };
</script>

<style lang="scss" scoped>
  /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
  /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
  /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
  /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
      color: #fff;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
      color: #2974FF;
  }
  /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
  /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
  /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}

  /deep/ .el-table th{ background: rgb(246, 246, 246);}
  /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
  /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
  /deep/ .el-button{ padding: 11px 23px !important;}
  /deep/ .el-button--mini{ padding: 6px 15px !important;}
  /deep/ .el-button--danger {
      color: #FFF;
      background-color: #2974FF;
      border-color: #2974FF;
  }
</style>
